<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
</head>
<!-- 头部导航栏 -->
<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  a {
    color: #666666;
    text-decoration: none;
  }

  li {
    list-style-type: none;
  }

  .header_ul {
    display: flex;
    text-align: right;
    padding-top: 2%;
  }

  .header_ul li {
    margin-left: 5%;
    font-size: 14px;
    font-weight: 600;
    color: #666666;
  }
</style>

<body>
  <div class="container">
    <div style="display: flex;padding: 2% 0;">
      <div style="width: 25%; display: flex;">
        <div>
          <img src="../img/hz0w.png" width="60px" alt="">
        </div>
        <div style="text-align: center;padding-top: 2.5%;padding-left: 5%;">
          <h5 style="font-weight: 600;margin: 0;color: rgb(83, 71, 65);font-family: 微软雅黑;">誉禾植物店</h5>
          <span style="font-size: 12px; font-weight: 600;color: rgb(83, 71, 65);">Plants store</span>
        </div>
      </div>
      <div style="width: 75%; text-align: right;">
        <ul class="header_ul">
          <li><a href="./home.html" target="_top">首页</a></li>
          <li><a href="./about.html" target="_top">关于我们</a></li>
          <li><a href="./green_planting.html" target="_top">绿植中心</a></li>
          <li><a href="./news.html" target="_top">新闻资讯</a></li>
          <li><a href="./activities.html" target="_top">促销活动</a></li>
          <li><a href="./shop.html" target="_top">购物车</a></li>
          <li><a href="./contact.html" target="_top">联系我们</a></li>
          <li id="li_1"><a href="./login.html" style="font-weight: 600;color: rgb(142, 179, 89);" target="_top">登录</a></li>
          <li id="li_2"> <a href="./login.html" style="font-weight: 600;color: rgb(142, 179, 89);" target="_top">退出登录</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }
</style>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>

</html>